<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>DashBoard</title>
    <!--引入js-->
    <script src="/js/socket.io.js"></script>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/highcharts.js"></script>
    <script src="/js/exporting.js"></script>
    <script type="text/javascript">
        // 用于存储各学期男女生count总和的对象，键为学期，值为包含男女生count总和的对象
        var semesterData = {};

        // 连接
        var socket = io.connect('127.0.0.1:7777');

        // 初始化图表函数
        function initChart() {
            return Highcharts.chart('container', {
                chart: {
                    type: 'bar',
                    animation: Highcharts.svg,
                    marginRight: 10
                },
                title: {
                    text: '不同学期男女生人数统计'
                },
                xAxis: {
                    title: {
                        text: '学期'
                    },
                    categories: []
                },
                yAxis: {
                    title: {
                        text: '人数总和'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }],
                    allowDecimals: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.x + '<br/>' +
                            Highcharts.numberFormat(this.y, 0);
                    }
                },
                legend: {
                    enabled: true
                },
                exporting: {
                    enabled: true
                },
                series: [{
                    name: '女生人数',
                    data: [],
                    color: 'green',
                    stacking: 'normal'
                },
                    {
                        name: '男生人数',
                        data: [],
                        color: 'purple',
                        stacking: 'normal'
                    }]
            });
        }

        // // 接收客户端发送来消息，并处理数据添加到图表
        // socket.on('msg', function (message) {
        //     console.log("Received message:", message);
        //     var dataArray = message.split(',');
        //     if (dataArray.length === 3) {
        //         var semeter = dataArray[0];
        //         var gender = dataArray[1];
        //         var count = parseInt(dataArray[2]);
        //         if (!semesterData[semeter]) {
        //             semesterData[semeter] = { maleSum: 0, femaleSum: 0 };
        //         }
        //         if (gender ==='male') {
        //             semesterData[semeter].maleSum += count;
        //         } else if (gender === 'female') {
        //             semesterData[semeter].femaleSum += count;
        //         }
        //
        //         updateChart();
        //     }
        // });
        socket.on('semetermsg', function (message) {
            console.log("孟佳怡", message);
            var dataArray = message.split(',');
            if (dataArray.length === 3) {
                var semeter = dataArray[0];
                var gender = dataArray[1];
                var count = parseInt(dataArray[2]);
                if (!semesterData[semeter]) {
                    semesterData[semeter] = { maleSum: 0, femaleSum: 0 };
                }
                if (gender ==='male') {
                    semesterData[semeter].maleSum += count;
                } else if (gender === 'female') {
                    semesterData[semeter].femaleSum += count;
                }
                updateChart();
            }
        });
        // 更新图表数据的函数
        function updateChart() {
            var chart = Highcharts.charts['container'];
            if (!chart) {
                chart = initChart();
            }
            var semesters = Object.keys(semesterData);
            chart.xAxis[0].setCategories(semesters);

            var femaleSeries = chart.series[0];
            var maleSeries = chart.series[1];
            semesters.forEach(function (semeter) {
                var femaleSum = semesterData[semeter]? semesterData[semeter].femaleSum : 0;
                var maleSum = semesterData[semeter]? semesterData[semeter].maleSum : 0;
                femaleSeries.addPoint([semeter, femaleSum], true, false);
                maleSeries.addPoint([semeter, maleSum], true, false);
            });
            chart.redraw();
        }

        window.onload = function () {
            Highcharts.setOptions({
                global: {
                    // 设置时间，使用本地时间
                    useUTC: false
                }
            });
            updateChart();
        };
    </script>
</head>

<body>
<div id="container" style="width: 100%;height: 100%;margin: 0 auto"></div>
</body>

</html>
